<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>  
		
		</style>
	</head>
	<body>

		<div id="app">
			<!-- name','age','passcet4','fav  -->
			<!-- 默认的传递的属性都是 string 类型 -->
			
			<mydialog name="张飞" age="60" passcet4="true" :fav="['篮球','足球','羽毛球']" ></mydialog>
			
			
			<mydialog name="刘备" age="50" :passcet4="false" v-bind:fav="['篮球','足球','羽毛球']" ></mydialog>
				
			
		</div>
		
		
		<template id="mydialog">
			<div   style="width:500px;height:300px;border:solid 1px red;margin:20px" >
				  用户信息: <br>
				  姓名(期望String--实际类型{{showtypeof(name)}}      				 : {{name}}  <br>
				  年龄（期望Number--实际类型{{showtypeof(age)}} ）						:		 {{age}}  <br>
				  pass-CET(期望boolean --实际的类型 : {{showtypeof(passcet4)}}):				 {{passcet4}}  <br>
				  <div v-if="passcet4">  通过了四级  </div>
				  <div v-else="passcet4">  没通过了四级  </div>

				  爱好(期望 Array-- 实际的类型 : {{showtypeof(fav)}}): 
				   <ol>
						<li v-for="(item,index) in fav">{{item}}</li>
				   </ol>
			</div>
			
		</template>
		
		<script>
			
			let bb = "['篮球','足球','羽毛球']"
			let aa = ['篮球','足球','羽毛球'];
			
			
			// let bbb  = false;
			// if(bbb){
			// 	alert('')
			// }
			
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					show:true
				},
				//上面的省略的写法
				components:{
					mydialog:{
						props:['name','age','passcet4','fav'],
						template:'#mydialog',
						methods:{
							showtypeof(obj){
								return typeof(obj)
							}
						}
					}
				}
				
				

			});
		</script>

	</body>
</html>
